<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="false" @searchHandler="searchHandler">
        <f-search-form-item label="分类名称" name="categoryName"/>
      </f-search-form>
      <f-table ref="table" size="default" rowKey="processId" :columns="columns" :multiple="false" :operator="operator" :params="queryParam" :api="api.tasktodo">
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-if="record.endTime==''&&record.assignee!=''&& record.assignee!=''" @click="$refs.drawer.showDrawer(record)">办理</a>
            <a v-if="record.assignee==''||record.assignee==''" @click="claimTask(record)">认领</a>
             <a-divider type="vertical" />
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
               <a-menu-item v-if="record.assignee===$store.getters.userInfo.username && record.endTime==''">
                <a href="javascript:;" @click="unClaimTask(record)">取消认领</a>
              </a-menu-item>
              <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="$refs.table.del(record)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </f-table>
      <task-todo-drawer ref="drawer"></task-todo-drawer>
    </a-card>
  </div>
</template>
<script>

  import api from './js/api'
  import TaskTodoDrawer from './tasktodo_drawer'

  export default {
    name: 'TableList',
    components: {
      TaskTodoDrawer
    },
    data() {
      let me = this
      //操作按钮
      let operator = []

      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '#',
            width: '60',
            align: 'center',
            customRender: (text, record, index) => index + 1
          },
          {
            title: '实例名称',
            align: 'center',
            dataIndex: 'processInstanceName'
          },
          {
            title: '任务名称',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'createTime'
          },
          {
            title: '到期日期',
            align: 'center',
            dataIndex: 'dueDate'
          },
          {
            title: '发起人',
            align: 'center',
            dataIndex: 'owner'
          },
          {
            title: '执行人',
            align: 'center',
            dataIndex: 'assignee'
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    methods: {
      claimTask(task) {
        this.http.put(this, {
          url: this.api.tasktodo.claim,
          data: {
            taskId: task.id
          },
          success(me, data) {
            me.$refs['table'].refresh(false)
          }
        })
      },
      unClaimTask(task) {
        this.http.put(this, {
          url: this.api.tasktodo.unclaim,
          data: {
            taskId: task.id
          },
          success(me, data) {
            me.$refs['table'].refresh(false)
          }
        })
      }
    }
  }
</script>
